<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="流水号">
                  <el-input v-model="searchModel.bizNo" placeholder="流水号" />
                </el-form-item>
                <el-form-item label="商家编号">
                  <el-input
                    v-model="searchModel.userId"
                    placeholder="商家编号"
                  />
                </el-form-item>
                <el-form-item label="支付宝帐号">
                  <el-input
                    v-model="searchModel.alipayNickName"
                    placeholder="支付宝帐号"
                  />
                </el-form-item>
                <el-form-item label="提现状态">
                  <el-radio-group
                    v-model="searchModel.payStatus"
                    @change="search"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="wait_pay">待提现</el-radio-button>
                    <el-radio-button label="paying">提现中</el-radio-button>
                    <el-radio-button label="pay_failed"
                      >转账失败</el-radio-button
                    >
                    <el-radio-button label="payed">已提现</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                
                <el-form-item label="完成时间">
                  <el-date-picker
                    v-model="searchModel.endTime"
                    :default-time="['00:00:00']"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>

                <el-form-item class="operations">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div class="sumBox">
          <div class="sumItem">
          <span class="m-t-8">服务费余额提现总额</span>
          <div class="sumdata1">
            <span>¥ {{ extra }}</span>
          </div>
        </div>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="small"
              style="width: 100%"
            >
            <el-table-column prop="createTime" label="提现时间" />
              <el-table-column prop="bizNo" label="流水号" />
              <el-table-column prop="userId" label="商家编号" />
              <el-table-column prop="alipayNickName" label="支付宝帐号" />
              <el-table-column prop="realName" label="支付宝实名" />
              <el-table-column label="提现金额">
                <template slot-scope="scope">
                  ¥ {{ scope.row.transferMoney / 100 }}
                </template>
              </el-table-column>
              <el-table-column label="提现状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.payStatus === 'wait_pay'">待提现</span>
                  <span v-if="scope.row.payStatus === 'paying'">提现中</span>
                  <span
                    v-if="scope.row.payStatus === 'pay_failed'"
                    style="color: red"
                    >转账失败</span
                  >
                  <span
                    v-if="scope.row.payStatus === 'payed'"
                    style="color: #44b549"
                    >已提现</span
                  >
                </template>
              </el-table-column>
               <el-table-column prop="errorMsg" label="备注" />

         
              <el-table-column prop="endTime" label="完成时间" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div>
                    <el-button style="margin-left: 8px" v-permission="['ADMIN', 'user-withdraw-record::trans']" v-if="scope.row.payStatus === 'wait_pay' || scope.row.payStatus === 'paying'" type="text" @click="doTrans(scope.row.id)"
                      >线上转账</el-button
                    >
                    <el-button v-permission="['ADMIN', 'user-withdraw-record::close']" v-if="scope.row.payStatus === 'wait_pay'" type="text" @click="doclose(scope.row.id)"
                      >关闭</el-button
                    >
                    <el-button v-permission="['ADMIN', 'user-withdraw-record::confirm']" v-if="scope.row.payStatus === 'wait_pay'" type="text" @click="offlineTrans(scope.row.id)"
                      >线下转账确认</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging-wrap">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize"
                :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
          <!-- 关闭 -->
          <el-dialog
            :visible.sync="dialogCloseFormVisible"
            title="关闭"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
          >
            <el-form :model="closeUserWithdrawPo" label-width="120px">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="closeUserWithdrawPo.remark"
                />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogCloseFormVisible = false"
                >取 消</el-button
              >
              <el-button
                :disabled="saveVideoBtnDisabled"
                type="primary"
                :loading="opLoading"
                @click="close"
                >确 定</el-button
              >
            </div>
          </el-dialog>

             <!-- 确认 -->
             <el-dialog
            :visible.sync="dialogconfirmFormVisible"
            title="线下转账确认"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
          >
            <el-form :model="confirmUserWithdrawPo" label-width="120px">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="confirmUserWithdrawPo.remark"
                />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogconfirmFormVisible = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                :loading="opLoading"
                @click="doOfflineTrans"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchUserWithdrawRecord,
  transUserWithdrawRecord,
  closeUserWithdraw,
  confirmUserWithdraw,
} from "@/api/business";
const defaultModel = {
  bizNo: null,
  payStatus: "",
  alipayNickName: null,
  userId: null,
  endTime:"",
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
export default {
  components: {},
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      closeUserWithdrawPo: {
        
      },
      confirmUserWithdrawPo: {

      },
      loading: false,
      opLoading: false,
      curData: null,
      extra: null,
      dialogCloseFormVisible: false,
      saveVideoBtnDisabled: false,

      dialogconfirmFormVisible: false,
    };
  },
  mounted() {
    // 判断路由中是否有daily参数，如果有代表从日账单跳转过来
    const param = this.$route.query.from;
    if (param === "daily") {
      this.searchModel.maxAmount = 0;
      this.searchModel.minAmount = "";
    }
    this.init();
  },
  methods: {
    //线下转账
    offlineTrans(id) {
      this.dialogconfirmFormVisible = true;
      this.confirmUserWithdrawPo.id = id;
    },

    doOfflineTrans() {
      this.opLoading = true
      confirmUserWithdraw(this.confirmUserWithdrawPo)
        .then((resp) => {
          this.opLoading = false
          if (resp.success) {
            this.$message({
              type: "success",
              message: "确认成功!",
            });

            this.dialogconfirmFormVisible = false;

            this.getList(1);
          }
        })
        .catch((error) => {});
    },

    doTrans(id) {
      transUserWithdrawRecord(id)
        .then((resp) => {
          if (resp.success) {
            window.open(resp.data);
          } else {
            this.$message.error(`转账失败:${resp.resultMessage}`);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    search() {
      this.getList(1);
    },

    getList(pageNo) {
      this.loading = true;
      if (pageNo) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      this.compileSearchModel(searchModel);
      console.log(searchModel);
      searchUserWithdrawRecord(searchModel)
        .then((res) => {
          if (res.success) {
            this.searchModel.count = res.count;
            this.list = res.data;
            this.extra = res.extra;
          } else {
            this.$message.error(`查询失败:${res.resultMessage}`);
          }

          this.loading = false;
        })
        .catch((err) => {
          this.$message({ type: "error", message: "查询失败" });
          this.loading = false;
        });
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;

      if (searchModel.endTime && searchModel.endTime.length) {
        searchModel['minEndTime'] = searchModel.endTime[0]
        searchModel['maxEndTime'] = searchModel.endTime[1]
      }
      delete searchModel.endTime;

      return searchModel;
    },
    doclose(id) {
      this.dialogCloseFormVisible = true;
      this.closeUserWithdrawPo.id = id;
    },
    //关闭转账
    close() {
      this.opLoading = true
      closeUserWithdraw(this.closeUserWithdrawPo)
        .then((resp) => {
          this.opLoading = false
          if (resp.success) {
            this.$message({
              type: "success",
              message: "关闭成功!",
            });

            this.dialogCloseFormVisible = false;

            this.getList(1);
          }
        })
        .catch((error) => {});
    },
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    // 修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },
    init() {
      this.getList(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.substationGroup {
  margin-bottom: 16px;
  .substationItem {
    margin-right: 20px;
  }
}

.sumBox {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  padding: 0 2px;
  margin-bottom: 10px;
}
.sumItem {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    align-items: center;
    margin-right: 16px;
    height: 150px;
    padding: 16px;
    background-color: #fff;
    box-sizing: border-box;
    font-weight: 600;

    .sumdata {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
    }

  }
</style>
